<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安安的专属空间 - 温馨寄语</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        /* 全局样式 */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #fdf2f8 0%, #fef7fb 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow-x: hidden;
            padding: 2rem 0;
            position: relative;
        }

        /* 顶部小字样式（进入页） */
        .top-text {
            font-size: 1.2rem;
            color: #9f7aea;
            margin-bottom: 1.5rem;
            letter-spacing: 0.1em;
            opacity: 0.9;
            text-shadow: 0 2px 4px rgba(159, 122, 234, 0.1);
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

        /* 主标题样式（进入页） */
        .main-title {
            font-size: 2.8rem;
            color: #ff6b8b;
            font-weight: 500;
            margin-bottom: 3rem;
            text-align: center;
            letter-spacing: 0.08em;
            text-shadow: 0 3px 6px rgba(255, 107, 139, 0.15);
            padding: 0 1rem;
            font-family: "PingFang SC", "Microsoft YaHei", "微软雅黑", "SimHei", "黑体", sans-serif;
        }

        /* 进入按钮样式（进入页） */
        .enter-btn,
        .popup-btn {
            padding: 1.2rem 3rem;
            font-size: 1.3rem;
            font-weight: 500;
            color: white;
            background: linear-gradient(135deg, #ff6b8b 0%, #ff477e 100%);
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 24px rgba(255, 107, 139, 0.3);
            display: flex;
            align-items: center;
            gap: 0.8rem;
            font-family: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
            margin-left: auto;
            margin-right: auto;
            justify-content: center;
        }

        .enter-btn:hover,
        .popup-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 28px rgba(255, 107, 139, 0.4);
            background: linear-gradient(135deg, #ff5a7f 0%, #ff3366 100%);
        }

        .enter-btn i,
        .popup-btn i {
            font-size: 1.5rem;
        }

        /* 第二个界面：温馨寄语区样式 */
        .message-container,
        .third-container {
            display: none;
            width: 90%;
            max-width: 1000px;
            height: 80vh;
            /* 固定高度，适配显示区域 */
            margin: 0 auto;
            padding: 2rem 0;
            animation: fadeIn 0.8s ease forwards;
            position: relative;
            /* 作为随机句子容器 */
        }

        /* 寄语区标题 */
        .message-title {
            font-size: 2rem;
            color: #ff6b8b;
            text-align: center;
            margin-bottom: 1rem;
            font-weight: 500;
            letter-spacing: 0.1em;
            font-family: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
            position: relative;
            z-index: 1000;
            /* 标题始终在最上层 */
        }

        /* 寄语列表（第二个界面） */
        .message-list {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            /* 适配手机屏幕，扩大容器占比 */
            height: 90%;
        }

        /* 第三个界面：随机句子容器（全屏范围，降低重叠） */
        .third-message-list {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            /* 全屏宽度，给随机位置更多空间 */
            height: 100%;
            /* 全屏高度 */
        }

        /* 第二个界面文本框（6字） */
        .message-box {
            display: none;
            /* 默认隐藏，JS控制显示 */
            position: absolute;
            transform: translate(-50%, -50%);
            background: white;
            padding: 0.8rem 1.5rem;
            /* 优化内边距，触摸更舒适 */
            border-radius: 18px;
            box-shadow: 0 4px 12px rgba(255, 107, 139, 0.25);
            transition: all 0.3s ease;
            min-width: 140px;
            /* 桌面端6字适配 */
            max-width: 140px;
            border: 2px solid #ffccd5;
            opacity: 0.95;
            animation: popIn 0.3s ease forwards;
            z-index: 1;
        }

        /* 第三个界面文本框（长句适配，低重叠） */
        .third-message-box {
            display: none;
            position: absolute;
            transform: translate(-50%, -50%);
            background: white;
            padding: 1rem 1.8rem;
            border-radius: 20px;
            box-shadow: 0 6px 16px rgba(255, 107, 139, 0.28);
            transition: all 0.3s ease;
            min-width: 180px;
            /* 适配长句 */
            max-width: 260px;
            /* 限制最大宽度，避免过宽导致重叠 */
            border: 2px solid #ffccd5;
            opacity: 0.98;
            animation: popIn 0.3s ease forwards;
            z-index: 1;
            /* 增加间距，降低重叠概率 */
            margin: 10px;
        }

        /* 长句文字样式（支持换行，居中） */
        .third-message-text {
            font-size: 1rem;
            color: #333;
            line-height: 1.6;
            text-align: center;
            font-family: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
            margin: 0;
            letter-spacing: 0.03em;
        }

        /* 移除差异化样式，统一格式 */
        .message-box::before,
        .third-message-box::before {
            display: none;
        }

        /* 悬浮/触摸交互（手机端触摸时视觉反馈） */
        .message-box:hover,
        .message-box:active,
        .third-message-box:hover,
        .third-message-box:active {
            transform: translate(-50%, -50%) scale(1.1);
            box-shadow: 0 8px 16px rgba(255, 107, 139, 0.4);
            border-color: #ff6b8b;
            z-index: 9999;
            opacity: 1;
        }

        /* 文字样式（手机端字体适配） */
        .message-text {
            font-size: 0.95rem;
            /* 桌面端 */
            color: #333;
            line-height: 1.4;
            text-align: center;
            font-family: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
            margin: 0;
            white-space: nowrap;
            /* 强制一行 */
            overflow: visible;
            letter-spacing: 0.02em;
        }

        /* 装饰元素 */
        .decor {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(255, 107, 139, 0.05);
            filter: blur(50px);
            z-index: -1;
        }

        .decor-1 {
            top: 10%;
            left: 10%;
        }

        .decor-2 {
            bottom: 10%;
            right: 10%;
        }

        /* 弹窗样式 */
        .popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(253, 242, 248, 0.85);
            backdrop-filter: blur(8px);
            z-index: 99999;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.5s ease forwards;
        }

        .popup-content {
            background: white;
            padding: 3rem 2.5rem;
            border-radius: 24px;
            box-shadow: 0 12px 32px rgba(255, 107, 139, 0.3);
            text-align: center;
            max-width: 80%;
            border: 2px solid #ffccd5;
        }

        .popup-title {
            font-size: 1.8rem;
            color: #ff6b8b;
            margin-bottom: 2rem;
            font-weight: 500;
            letter-spacing: 0.08em;
            font-family: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
        }

        /* 爱心动画容器 */
        .heart-animation-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            /* 低于文本框，不影响阅读 */
            pointer-events: none;
            /* 不阻挡触摸交互 */
        }

        /* 爱心动画元素 */
        .heart {
            position: absolute;
            color: #ff6b8b;
            opacity: 0.6;
            animation: heartFloat 4s ease-in-out infinite;
            transform-origin: center;
        }

        /* 爱心漂浮动画 */
        @keyframes heartFloat {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0.3;
            }

            50% {
                opacity: 0.8;
            }

            100% {
                transform: translateY(-100px) rotate(360deg);
                opacity: 0;
            }
        }

        /* 容器淡入动画 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 文本框弹出动画 */
        @keyframes popIn {
            from {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.8);
            }

            to {
                opacity: 0.95;
                transform: translate(-50%, -50%) scale(1);
            }
        }

        /* 手机端重点适配 */
        @media (max-width: 768px) {
            .top-text {
                font-size: 1.1rem;
                margin-bottom: 1.2rem;
            }

            .main-title {
                font-size: 2.2rem;
                margin-bottom: 2.8rem;
            }

            .enter-btn,
            .popup-btn {
                padding: 1.1rem 2.8rem;
                font-size: 1.2rem;
            }

            .message-title {
                font-size: 1.7rem;
                margin-bottom: 1.2rem;
            }

            .message-box {
                padding: 0.7rem 1.4rem;
                min-width: 130px;
                max-width: 130px;
            }

            .message-text {
                font-size: 0.9rem;
            }

            .message-container,
            .third-container {
                height: 75vh;
                padding: 1.5rem 0;
            }

            .message-list {
                width: 95%;
                height: 95%;
            }

            .third-message-list {
                width: 100%;
                height: 100%;
            }

            .third-message-box {
                min-width: 160px;
                max-width: 200px;
                padding: 0.9rem 1.5rem;
                margin: 8px;
            }

            .third-message-text {
                font-size: 0.9rem;
            }

            .popup-title {
                font-size: 1.6rem;
                margin-bottom: 1.8rem;
            }

            .popup-content {
                padding: 2.5rem 2rem;
            }
        }

        @media (max-width: 480px) {
            .top-text {
                font-size: 1rem;
                margin-bottom: 1rem;
            }

            .main-title {
                font-size: 2rem;
                margin-bottom: 2.5rem;
            }

            .enter-btn,
            .popup-btn {
                padding: 1rem 2.5rem;
                font-size: 1.1rem;
            }

            .message-title {
                font-size: 1.6rem;
                margin-bottom: 1rem;
            }

            .message-box {
                padding: 0.65rem 1.2rem;
                min-width: 120px;
                max-width: 120px;
            }

            .message-text {
                font-size: 0.85rem;
            }

            .message-container,
            .third-container {
                height: 72vh;
            }

            .message-list {
                width: 98%;
                height: 98%;
            }

            .third-message-box {
                min-width: 140px;
                max-width: 170px;
                padding: 0.8rem 1.3rem;
                margin: 6px;
            }

            .third-message-text {
                font-size: 0.85rem;
            }

            .decor {
                width: 150px;
                height: 150px;
            }

            .popup-title {
                font-size: 1.4rem;
                margin-bottom: 1.5rem;
            }

            .popup-content {
                padding: 2rem 1.5rem;
            }
        }
    </style>
</head>

<body>
    <!-- 装饰元素 -->
    <div class="decor decor-1"></div>
    <div class="decor decor-2"></div>

    <!-- 第一个界面：进入页 -->
    <div class="enter-page">
        <div class="top-text">段博文说</div>
        <h1 class="main-title">欢迎来到安安的专属空间</h1>
        <button class="enter-btn" onclick="enterSpace()">
            <i class="fa fa-heart"></i>
            进入空间
        </button>
    </div>

    <!-- 第二个界面：温馨寄语区（最后一句固定为“安安幸福快乐！”） -->
    <div class="message-container" id="messageContainer">
        <h2 class="message-title">给安安的祝福 💖</h2>
        <div class="message-list" id="messageList">
            <!-- 考研上岸主题（32句） -->
            <div class="message-box">
                <p class="message-text">安安考研顺利</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安错题攻克</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安提笔有思</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安成功上岸</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安研途终甜</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安院校招手</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安研路不孤</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安上岸同庆</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安冲刺向好</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安过目不忘</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安难题不惧</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安次次进步</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安顺利录取</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安坚持有果</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安节奏超稳</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安发挥超常</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安知识点牢</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安刷题高效</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安考场从容</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安高分上岸</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安研梦成真</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安复试顺利</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安备考无忧</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安金榜题名</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安信心满满</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安思路清晰</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安答题流畅</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安上岸可期</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安日夜耕耘</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安终得所愿</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安研途闪耀</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安一战成硕</p>
            </div>

            <!-- 爱人关心主题（32句） -->
            <div class="message-box">
                <p class="message-text">安安按时吃饭</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安别熬夜呀</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安天冷加衣</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安累了歇歇</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安不开心说</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安保持笑容</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安别委屈胃</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安我超疼爱</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安出门平安</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安多喝温水</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安少点压力</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安喜物我买</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安靠我避风</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安情绪我懂</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安牵挂常在</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安生病速好</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安三餐规律</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安好好休息</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安注意保暖</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安有我陪伴</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安烦恼消散</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安笑容灿烂</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安想吃就吃</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安满心欢喜</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安一路平安</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安水润润喉</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安轻松自在</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安心意我懂</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安我来守护</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安快乐无忧</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安健康无恙</p>
            </div>

            <!-- 未来祝福主题（24句） -->
            <div class="message-box">
                <p class="message-text">安安未来闪光</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安梦想成真</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安平安喜乐</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安前路坦荡</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安收获美好</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安永远被爱</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安旅途有喜</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安事业顺利</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安感情甜蜜</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安财运亨通</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安无病无灾</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安心态年轻</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安万事顺意</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安前程似锦</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安喜乐常伴</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安一路繁花</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安好运连连</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安被爱包围</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安惊喜不断</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安大展宏图</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安相守一生</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安富贵吉祥</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安岁岁平安</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安永远鲜活</p>
            </div>

            <!-- 日常暖心主题（11句+最后固定句） -->
            <div class="message-box">
                <p class="message-text">安安每天幸运</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安事事顺心</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安要自信呀</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安被世温柔</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安日日开心</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安善良有报</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安好运相伴</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安心想事成</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安超棒超赞</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安温柔以待</p>
            </div>
            <div class="message-box">
                <p class="message-text">安安喜乐无忧</p>
            </div>
            <!-- 最后一句：固定为“安安幸福快乐！” -->
            <div class="message-box">
                <p class="message-text">安安幸福安康</p>
            </div>
        </div>
    </div>

    <!-- 弹窗：第二个界面结束后显示 -->
    <div class="popup" id="popup">
        <div class="popup-content">
            <h3 class="popup-title">你以为这就结束了吗？</h3>
            <button class="popup-btn" onclick="goToThirdPage()">
                <i class="fa fa-heart"></i>
                心动一下
            </button>
        </div>
    </div>

    <!-- 第三个界面：随机长句祝福+爱心动画 -->
    <div class="third-container" id="thirdContainer">
        <h2 class="message-title">还想给你说 💖</h2>
        <div class="heart-animation-container" id="heartAnimationContainer"></div>
        <div class="third-message-list" id="thirdMessageList"></div>
    </div>

    <script>
        // 存储已生成的坐标，用于避免重叠
        let usedPositions = [];
        // 最小间距（百分比），根据文本框大小调整
        const minDistance = 12;

        // 进入空间：隐藏进入页，显示寄语界面
        function enterSpace() {
            document.querySelector('.enter-page').style.display = 'none';
            const messageContainer = document.getElementById('messageContainer');
            messageContainer.style.display = 'block';

            // 显示完容器后，开始加载文本框（组成爱心）
            setTimeout(startShowMessages, 300);
        }

        // 生成第二个界面爱心坐标（紧凑布局）
        function generateHeartCoordinates(count) {
            const coordinates = [];
            for (let i = 0; i < count; i++) {
                const t = (i / count) * Math.PI * 2;
                // 笛卡尔心形方程，优化手机端爱心比例
                let x = 13 * Math.pow(Math.sin(t), 3);
                let y = 10 * Math.cos(t) - 3.5 * Math.cos(2 * t) - 1.2 * Math.cos(3 * t) - 0.7 * Math.cos(4 * t);

                // 坐标归一化+压缩范围，确保手机端密集布局
                const normX = (x + 13) / 26 * 90 + 5;
                const normY = (17 - (y + 5)) / 22 * 90 + 5;

                coordinates.push({ x: normX, y: normY });
            }
            return coordinates;
        }

        // 第二个界面句子显示逻辑：0.3秒间隔+最后一句固定为“安安幸福快乐！”
        function startShowMessages() {
            const messageBoxes = document.querySelectorAll('.message-box');
            const boxCount = messageBoxes.length;
            // 1. 筛选出最后一句“安安幸福快乐！”
            const targetBox = Array.from(messageBoxes).find(box => {
                return box.querySelector('.message-text').textContent === '安安幸福快乐';
            });
            // 2. 打乱其他句子，排除最后一句
            const otherBoxes = Array.from(messageBoxes).filter(box => box !== targetBox);
            const shuffledOtherBoxes = otherBoxes.sort(() => Math.random() - 0.5);
            // 3. 重组数组：打乱的其他句子 + 最后固定句
            const finalBoxes = [...shuffledOtherBoxes, targetBox];

            const heartCoords = generateHeartCoordinates(boxCount);
            let currentZIndex = 1;

            // 0.3秒间隔显示
            const showInterval = setInterval(() => {
                if (currentZIndex <= boxCount) {
                    const index = currentZIndex - 1;
                    const box = finalBoxes[index];
                    const coord = heartCoords[index];

                    // 坐标定位
                    box.style.left = `${coord.x}%`;
                    box.style.top = `${coord.y}%`;
                    // 最新出现的置顶
                    box.style.zIndex = currentZIndex;

                    // 显示文本框
                    box.style.display = 'block';

                    currentZIndex++;
                } else {
                    clearInterval(showInterval);
                    // 第二个界面结束，显示弹窗
                    setTimeout(() => {
                        document.getElementById('popup').style.display = 'flex';
                    }, 1000); // 延迟1秒显示弹窗，给用户缓冲
                }
            }, 300);
        }

        // 点击弹窗继续，进入第三个界面
        function goToThirdPage() {
            // 隐藏弹窗和第二个界面
            document.getElementById('popup').style.display = 'none';
            document.getElementById('messageContainer').style.display = 'none';
            // 显示第三个界面
            const thirdContainer = document.getElementById('thirdContainer');
            thirdContainer.style.display = 'block';

            // 重置已用坐标，避免刷新后重叠
            usedPositions = [];
            // 开始显示第三个界面的句子和爱心动画
            startHeartAnimation();
            setTimeout(startShowThirdMessages, 500);
        }

        // 第三个界面：长句祝福数组（新增大量关心爱陪伴主题，总数120句）
        const longMessages = [
            // 原有主题句子（60句）
            "安安考研路上每一步都算数",
            "安安每天都能收获小美好",
            "安安遇到的难题都能轻松化解",
            "安安被全世界温柔以待",
            "安安考研成功上岸不负努力",
            "安安每天都有充沛的精力",
            "安安的坚持终将绽放光芒",
            "安安永远保持热爱与温柔",
            "安安考研复试超常发挥",
            "安安身边总有温暖相伴",
            "安安的未来繁花似锦",
            "安安每天都能笑口常开",
            "安安考研笔试顺利通关",
            "安安想吃的美食都能吃到",
            "安安永远被爱包围不孤单",
            "安安的努力都能得到回报",
            "安安考研上岸后前程无忧",
            "安安每天都能睡个好觉",
            "安安的善良总能温暖他人",
            "安安考研复习效率超高",
            "安安遇到的都是善良的人",
            "安安永远保持初心与热爱",
            "安安考研成功后事事顺心",
            "安安的生活满是小惊喜",
            "安安的健康永远有保障",
            "安安考研路上有贵人相助",
            "安安每天都能元气满满",
            "安安的梦想都能一一实现",
            "安安考研成绩远超预期",
            "安安的日子越过越红火",
            "安安永远年轻快乐无忧",
            "安安考研上岸后越来越好",
            "安安的笑容能治愈一切",
            "安安的努力被所有人看见",
            "安安考研复试轻松过关",
            "安安每天都能收获感动",
            "安安的未来一片光明",
            "安安永远被幸福围绕",
            "安安考研路上从不迷茫",
            "安安的生活充满阳光",
            "安安的健康平安是最大的福气",
            "安安毕业之后事业顺利",
            "安安每天都能遇见小幸运",
            "安安的温柔善良值得被爱",
            "安安考研复习事半功倍",
            "安安的日子甜甜蜜蜜",
            "安安永远保持积极乐观",
            "安安考研上岸后感情美满",
            "安安的生活无忧无虑",
            "安安的努力终将换来美好",
            "安安考研路上一路绿灯",
            "安安每天都能心情愉悦",
            "安安的未来可期闪闪发光",
            "安安永远被温柔与爱包围",
            "安安考研成功上岸万事顺意",
            "安安的生活充满希望",
            "安安的健康快乐是最重要的",
            "安安考研复习顺顺利利",
            "安安的日子红红火火",
            "安安永远保持纯真与美好",

            // 新增关心爱陪伴主题（60句）
            "安安我会陪在你身边",
            "安安有我在不用害怕",
            "安安你的喜怒哀乐我在乎",
            "安安累了就靠在我肩膀休息",
            "安安每天都想和你分享点滴",
            "安安有你在的日子才完整",
            "安安我会包容你的小脾气",
            "安安你的笑容是我的软肋",
            "安安难过时我永远是你的倾听者",
            "安安你是我藏在心底的温柔",
            "安安不管多远我都会奔向你",
            "安安我会记得你的喜好",
            "安安有我在你永远可以做自己",
            "安安和你有关的一切都很珍贵",
            "安安委屈了就告诉我我来心疼",
            "安安我会为你遮风挡雨",
            "安安你是我生命中最美的遇见",
            "安安我会永远对你温柔以待",
            "安安有你在每天都充满阳光",
            "安安我会陪你考研到最后一刻",
            "安安你的努力我都看在眼里",
            "安安我会给你满满的安全感",
            "安安和你共度的时光都值得珍藏",
            "安安累了就停下我陪你休息",
            "安安你在我心里永远是最好的",
            "安安有我在你永远不会孤单",
            "安安你的每个愿望我都想实现",
            "安安我会陪你看遍世间风景",
            "安安你是我疲惫生活的希望",
            "安安我会为你成为更好的人",
            "安安有你在每天都充满期待",
            "安安我会陪你面对所有困难",
            "安安我会永远保持对你的热爱",
            "安安和你的每一天都值得纪念",
            "安安我会把你宠成小公主",
            "安安你的健康快乐是我的心愿",
            "安安我会陪你走过考研的艰难岁月",
            "安安你是我见过最温柔的人",
            "安安我会永远相信你支持你",
            "安安有我在你可以永远不用长大",
        ];

        // 生成随机坐标（扩大范围+避免重叠）
        function generateRandomPosition() {
            let x, y;
            let isTooClose = true;
            let attempts = 0; // 防止无限循环

            // 扩大坐标范围：10%-90%，给更多空间
            while (isTooClose && attempts < 50) {
                x = Math.random() * 70 + 10;
                y = Math.random() * 70 + 10;
                isTooClose = false;

                // 检查是否与已用坐标过于接近
                for (const pos of usedPositions) {
                    const distance = Math.sqrt(Math.pow(x - pos.x, 2) + Math.pow(y - pos.y, 2));
                    if (distance < minDistance) {
                        isTooClose = true;
                        break;
                    }
                }
                attempts++;
            }

            // 记录已用坐标
            usedPositions.push({ x, y });
            return { x, y };
        }

        // 第三个界面句子显示逻辑（更多句子+更低重叠+一次多句+0.4秒间隔+置顶）
        function startShowThirdMessages() {
            const thirdMessageList = document.getElementById('thirdMessageList');
            const totalMessageCount = 100; // 总显示句子数（从60增加到100）
            const maxPerBatch = 2; // 一次出现2句，降低重叠概率
            let currentZIndex = 1;
            let displayedCount = 0;

            // 0.4秒间隔，每次显示2句
            const showInterval = setInterval(() => {
                if (currentZIndex <= totalMessageCount) {
                    // 计算本次显示数量（最后一批可能不足2句）
                    const batchCount = Math.min(maxPerBatch, totalMessageCount - displayedCount);

                    // 一次生成2句
                    for (let i = 0; i < batchCount; i++) {
                        // 生成不重叠的随机坐标
                        const { x, y } = generateRandomPosition();
                        // 随机选取不重复的长句（避免重复显示）
                        const randomMsgIndex = Math.floor(Math.random() * longMessages.length);
                        const randomMsg = longMessages[randomMsgIndex];

                        // 创建文本框元素
                        const messageBox = document.createElement('div');
                        messageBox.className = 'third-message-box';
                        messageBox.style.left = `${x}%`;
                        messageBox.style.top = `${y}%`;
                        messageBox.style.zIndex = currentZIndex; // 最新置顶

                        const messageText = document.createElement('p');
                        messageText.className = 'third-message-text';
                        messageText.textContent = randomMsg;

                        messageBox.appendChild(messageText);
                        thirdMessageList.appendChild(messageBox);

                        // 触发显示动画
                        setTimeout(() => {
                            messageBox.style.display = 'block';
                        }, 50);

                        displayedCount++;
                        currentZIndex++; // 每句zIndex递增，确保最新置顶
                    }
                } else {
                    clearInterval(showInterval);
                }
            }, 400); // 间隔保持0.4秒
        }

        // 爱心动画生成（持续漂浮，增加密度）
        function startHeartAnimation() {
            const animationContainer = document.getElementById('heartAnimationContainer');
            const heartCount = 20; // 同时存在的爱心数量从15增加到20
            let currentHeartIndex = 0;

            // 定时生成爱心
            setInterval(() => {
                if (currentHeartIndex < heartCount) {
                    const heart = document.createElement('i');
                    heart.className = 'fa fa-heart heart';

                    // 随机样式（大小、位置、透明度、动画时长）
                    const size = Math.random() * 20 + 16; // 16-36px
                    const left = Math.random() * 90 + 5; // 5-95%
                    const opacity = Math.random() * 0.5 + 0.3; // 0.3-0.8
                    const animationDuration = Math.random() * 3 + 3; // 3-6秒

                    heart.style.fontSize = `${size}px`;
                    heart.style.left = `${left}%`;
                    heart.style.animationDuration = `${animationDuration}s`;
                    heart.style.opacity = opacity;

                    // 添加到容器
                    animationContainer.appendChild(heart);

                    // 动画结束后移除，避免DOM堆积
                    setTimeout(() => {
                        heart.remove();
                    }, animationDuration * 1000);

                    currentHeartIndex++;
                } else {
                    currentHeartIndex = 0;
                }
            }, 400); // 每0.4秒生成一个爱心，增加动画密度
        }
    </script>
</body>

</html>